import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Tag } from './Tag';

<Meta title="MDX|Tag" component={Tag} />

# Tag

Used for displaying metadata, for example to add more details to search results. Background and border colors are generated from the tag name.

<Preview>
  <div>
    <Tag name="Tag" onClick={(name) => console.log(name)} />
  </div>
</Preview>

### Usage

```jsx
import { Tag } from '@grafana/ui';

<Tag name="Tag" onClick={(name) => console.log(name)} />;
```

### Props

<ArgTypes of={Tag} />
